<template>
  <div class="buttons">
    <el-button type="primary" v-if="listData.form.isCreate" @click="goToCreate"
      >新增</el-button
    >
  </div>
  <el-table :data="listData.list" border>
    <template v-for="itemCol in listData.colomn" :key="itemCol">
      <el-table-column
        :prop="itemCol.prop"
        :label="itemCol.label"
      ></el-table-column>
    </template>

    <!-- <el-table-column prop="content" label="购票详情"></el-table-column>
    <el-table-column prop="people" label="购票人"></el-table-column>
    <el-table-column prop="time" label="购票时间"></el-table-column> -->
    <el-table-column label="操作">
      <template #default="scope">
        <el-button
          type="warning"
          v-if="listData.form.isModify"
          @click="goToModify(scope.row.id)"
          >修改</el-button
        >
        <el-button
          type="danger"
          v-if="listData.form.isDelete"
          @click="delData(scope.row.id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { reactive } from "@vue/reactivity";

import router from "../../router";
//   自动化 想法：1数据分为三部分
//   2list部分存放表格的数据
// 3coloun部分存放表格的栏属性
// 4 属性部分存放表格是否可添加、可删除、可更改
export default {
  setup() {
    let params = router.currentRoute.value.params;
    let type = params?.type;
    console.log("params", params, type);

    //  发出请求 listData赋值

    let listData = reactive({
      list: [
        { id: "123", content: "13", people: "12", time: "123" },
        { id: "43", content: "45", people: "3434", time: "435543" },
      ],
      colomn: [
        { prop: "people", label: "名字", id: "1" },
        { prop: "content", label: "内容", id: "2" },
        { prop: "time", label: "时间", id: "3" },
      ],
      form: { isCreate: true, isModify: true, isDelete: true },
    });

    function goToCreate() {
      console.log("create");
      // router.push("/manage/" + type + "/modify");
    }

    function goToModify(no) {
      console.log("modify", no);
      // router.push("/manage/" + type + "/modify/" + no);
    }

    function delData(no) {
      console.log("delete", no);
      // this.$alert("是否要删除该数据?", "确认删除", {
      //   confirmButtonText: "确定",
      //   callback: () => {
      //     // 删除api
      //     this.$messaage({
      //       type: "info",
      //       message: "已删除",
      //     });
      //   },
      // });
    }

    return { listData, goToCreate, goToModify, delData };
  },
};
</script>
<style>
.buttons {
  margin-bottom: 5px;
}
</style>